在開始講爬蟲前我們會先花幾天來講解一寫簡單的HTML架構與CSS以了解大概的網站架構,接著講Selenium的爬蟲運用,最後則是Discord bot的介紹與運用並將爬蟲運用至Discord bot上。
今天我們就講一下HTML的內容
在網頁內容<body>
裡通常會包含許多的標籤元素來顯示資訊,雖然同樣能夠顯示資訊但分清這些標籤元素的使用方法也是很重要的,用對的元素才能夠顯示出自己想要的形式。
以下使用HTML code來表示,可複製到自己的HTML檔案裡來預覽。
HTML 中較常用的內容標籤有:
<p>
,用於包含文本內容的段落。每個<p>
標籤會單獨佔據一行。<p>這是一個段落範例。</p>
<h1-h6>
,一共有6個級別的標題,<h1>
最大,<h6>
最小。標題可以表示文檔結構和層次。<h1>這是h1標題</h1>
<ul>
,用於創建專案符號清單。清單項使用<li>
標籤定義。<ul>
<li>列表項目1</li>
<li>列表項目2</li>
</ul>
<ol>
,用於創建編號清單。清單項使用<li>
標籤定義。<ol>
<li>列表項目1</li>
<li>列表項目2</li>
</ol>
<dl>
,用於創建術語及定義清單。術語使用<dt>
標籤,定義使用<dd>
標籤。<dl>
<dt>術語1</dt>
<dd>定義1</dd>
<dt>術語2</dt>
<dd>定義2</dd>
</dl>
<pre>
,保留文本中的空格、換行等格式。<pre>
這是一個
預定義格式
的範例
</pre>
<hr>
,在頁面中創建一條水準分隔線。<hr>
<br>
,在文本中插入換行。這是第一行<br>
這是第二行
<a>
,用於網頁間的超連結。<a href="http://www.example.com">這是一個連結範例</a>
<img>
,用於在頁面內嵌入圖片。<img src="image.jpg" alt="圖像範例">
<table>
,用於顯示行列數據。<table>
<tr>
<td>單元格1</td>
<td>單元格2</td>
</tr>
<tr>
<td>單元格3</td>
<td>單元格4</td>
</tr>
</table>
<div>
,用於對內容進行分組。<div>這是div塊容器範例</div>
<span>
,用於對文檔中的行內元素進行分組。它可以用來對文本中的一部分應用樣式。<span>這個是span範例。</span>
這些是 HTML 中最常用的內容標籤,涵蓋段落、標題、清單、圖像等內容。通過它們可以創建出格式化的網頁內容。
有更多的標籤可以參考官方MDN文檔